<template>
    <div class="view">
        <Form ref="form" :model="data" :rules="ruleValidate" :label-width="100">
            <FormItem label="标签：" prop="type">
                <RadioGroup v-model="data.type" @on-change="changeType">
                    <Radio label="1" style="color: rgba(255,255,255,0.6)">个人</Radio>
                    <Radio label="2" style="color: rgba(255,255,255,0.6)">团队</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="会员卡号：" prop="cardNo" v-if="!isTeam">
                <Input v-model="data.cardNo" placeholder="请输入会员卡号" class="input"></Input>
                <Button type="primary" @click="clickCardNo">查询</Button>
            </FormItem>
            <FormItem label="开始卡号：" prop="cardNo" v-if="isTeam">
                <Input v-model="data.cardNo" placeholder="请输入会员卡号" class="input"></Input>
            </FormItem>
            <FormItem label="终止卡号：" prop="stopCardNo" v-if="isTeam">
                <Input v-model="data.stopCardNo" placeholder="请输入会员卡号" class="input"></Input>
                <Button type="primary" @click="clickCardNo">查询</Button>
            </FormItem>
            <FormItem label="会员类型：">
                <p>{{data.creatorName}}</p>
            </FormItem>
            <FormItem label="卡片状态：" prop="status">
                <Input v-model="data.status" placeholder="请输入会员卡号" class="input" style="display:none"></Input>
                <p>{{data.status == 0? '空卡' : data.status == 1? '正常' : data.status == 2? '挂失': data.status == 3? '作废' : data.status == 4? '冻结': ''}}</p>
            </FormItem>
            <FormItem label="发卡单位：" prop="theaterName">
                <Input v-model="data.theaterName" style="display:none"></Input>
                <p>{{data.theaterName}}</p>
            </FormItem>
            <FormItem label="团队名称：" prop="teamName" v-if="isTeam">
                <Input v-model="data.teamName" placeholder="请输入团队名称" class="input"></Input>
            </FormItem>
            <FormItem label="手机号码：" prop="phone">
                <Input v-model="data.phone" placeholder="请输入手机号" class="input"></Input>
                <Button type="primary" @click="clickPhone">查询</Button>
            </FormItem>
            <FormItem label="姓名：" prop="userName">
                <Input v-model="data.userName" placeholder="请输入姓名" class="input"></Input>
            </FormItem>
            <FormItem label="身份证号：" prop="idNo">
                <Input v-model="data.idNo" :maxlength="18" placeholder="请输入身份证号" class="input"></Input>
            </FormItem>
            <FormItem label="地址：" prop="addr">
                <Input v-model="data.addr" placeholder="请输入地址" class="input"></Input>
            </FormItem>
            <FormItem label="性别：" prop="gender">
                <RadioGroup v-model="data.gender">
                    <Radio label="1" style="color: rgba(255,255,255,0.6)">男</Radio>
                    <Radio label="2" style="color: rgba(255,255,255,0.6)">女</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="密码：" prop="password">
                <Input type="password" v-model="data.password" placeholder="请输入密码" class="input"></Input>
            </FormItem>
            <FormItem label="确认密码：" prop="confirmThePassword">
                <Input type="password" v-model="data.confirmThePassword" placeholder="请输入确认密码" class="input"></Input>
            </FormItem>
            <FormItem label="充值金额：" prop="money">
                <Input number v-model="data.money" placeholder="请输入充值金额" class="input"></Input>
            </FormItem>
            <FormItem label="手机号登录：" prop="setPhoneLogin" v-if="!isTeam">
                <RadioGroup v-model="data.setPhoneLogin">
                    <Radio label="0" style="color: rgba(255,255,255,0.6)">否</Radio>
                    <Radio label="1" style="color: rgba(255,255,255,0.6)">是</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem>
                <Button type="primary" style="width: 3rem;" @click="clickSubmit">确认开卡</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import $ from 'jquery'
import memberService from '@/network/service/memberService.js'
var $this = null;
var idRule = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
var validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== $this.data.confirmThePassword) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};
export default {
    props: ['data'],
    data() {
        return {
            isTeam: false,
            ruleValidate: {
                cardNo: [
                    { required: true, message: '请输入卡号', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择卡标签', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                idNo: [
                    { pattern: idRule, message: '请正确输入身份证号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                confirmThePassword: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { validator: validatePass2, message: '新密码与确认密码不一致', trigger: 'blur' }
                ],
                money: [
                    { required: true, message: '请输入充值金额', trigger: 'blur', type: 'number' }
                ],
                setPhoneLogin: [
                    { required: true, message: '请选择是否设置手机号登陆', trigger: 'change' }
                ],
            }
        }
    },
    mounted() {
        $this = this;
        let fromLabel = $('.ivu-form-item-label');
        let input = $('.ivu-input');
		for(let i = 0; i < fromLabel.length; i++) {
			fromLabel[i].style.color = 'rgba(255, 255, 255, 0.6)'
        }
        for(let i = 0; i < input.length; i++) {
			input[i].style.color = 'rgba(255, 255, 255, 0.6)'
        }
    },
    updated() {
       let fromLabel = $('.ivu-form-item-label');
        let input = $('.ivu-input');
		for(let i = 0; i < fromLabel.length; i++) {
			fromLabel[i].style.color = 'rgba(255, 255, 255, 0.6)'
        }
        for(let i = 0; i < input.length; i++) {
			input[i].style.color = 'rgba(255, 255, 255, 0.6)'
        } 
    },
    methods: {
        changeType (val) {
            console.log(val)
            if (val == '1') {
                this.isTeam = false;
            } else if (val == '2') {
                this.isTeam = true;
            }
        },
        clickCardNo() {
            this.getCard();
        },
        clickPhone() {
            this.getCardList()
        },
        clickSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$Modal.confirm({
                        title: '确认开卡',
                        content: '确认是否开卡？',
                        onOk: () => {
                            this.$emit('on-submit', this.data);
                        }
                    });
                } else {
                    this.$Message.error('表单验证不正确!');
                }
            })
            
            
        },

        getCard() {
            let params = {
                cardNo: this.data.cardNo,
                tid:'6'
            }
            memberService.getCard(params).then(res => {
                let result = res.data;
                let code = result.rescode;
                let resmsg = result.msg;
                if (code == 100) {
                    this.data.cid = result.data.cid;
                    this.data.tid = result.data.theaterId;
                    this.data.status = result.data.status;
                    this.data.theaterName = result.data.theaterName;
                    this.data.creatorName = result.data.creatorName;
                } else {
                    this.$Message.error(resmsg)
                }
            }, error => {
                this.$Message.error('服务器异常，请稍后再试');
            })
        },
        getCardList() {
            memberService.getCardList(this.data.phone).then(res => {
                let result = res.data;
                let code = result.rescode;
                let resmsg = result.msg;
                if (code == 100) {
                    this.data.userId = result.data.userId;
                    this.data.userName = result.data.userName;
                    this.data.idNo = result.data.idNo;
                    this.data.addr = result.data.addr;
                    this.data.gender = result.data.gender;
                } else if (code == 106) {
                } else {
                    this.$Message.error(resmsg)
                }
            }, error => {
                this.$Message.error('服务器异常，请稍后再试');
            })
        },
    }
}
</script>

<style lang="less" scoped>
.view {
    padding: .2rem .3rem 0 .3rem;
    .input {
        width: 3rem;
    }
    p {
        color: rgba(255, 255, 255, 0.6)
    }
}
</style>


